<template>
  <div>
    <Card>
      <tables
        ref="tables"
        :loading="tableLoading"
        editable
        searchable
        search-place="top"
        v-model="tableData"
        :columns="columns"
        @on-delete="onDelete"
        @on-save-edit="onSaveEdit"
      />
    </Card>
  </div>
</template>

<script>
import Tables from '_c/tables'
// import { getTableData } from '@/api/data'
export default {
  name: 'tables_page',
  components: {
    Tables
  },
  data() {
    return {
      columns: [
        {title: '序号', key: 'id', width: 100},
        {title: '名称', key: 'goodsName', sortable: true},
        {title: '分类', key: 'goodsBrandId', editable: true, width: 300},
        {title: '属性', key: 'goodsAssortmentName'},
        {title: '品牌', key: 'goodsBrandName'},
        {
          title: '操作',
          key: 'action',
          align: 'center',
          render: (h, params) => {
            const props = {
              class: 'nihao',
              attrs: {
                id: 'nihaoa'
              }
            }
            return (
              <div {...props}>
                <Poptip title="确定要删除吗？" confirm vOn:on-ok={() => this.onDelete(params)}>
                  <Button type="text">删除</Button>
                </Poptip>
                <Button type="text" vOn:click={() => this.onEdit(params)}>编辑</Button>
              </div>
            )
          }
        }
      ],
      tableData: [],
      tableLoading: false
    }
  },
  methods: {
    onDelete(params) {
      console.log(params)
    },
    onEdit({row: {id, ...row}}) {
      console.log(id, row)
    },
    onSaveEdit(params) {
      console.log(params)
    }
  },
  async mounted() {
    this.tableLoading = true
    const res = await this.$get('/goodsSpu/queryGoods')
    if (res.code === 1) {
      this.tableData = res.data.list
    }
    this.tableLoading = false
  }
}
</script>

<style>
.nihao{
  font-size: 20px;
}
</style>
